<template>
  <div>
    <el-table
      :pagination="false"
      :data="listData"
      style="width: 100%"
      v-bind="childrenProps"
      :row-key="
        (record, index) => {
          return index
        }
      "
    >
      <el-table-column
        v-for="(item, index) in listData"
        :key="index"
        align="left"
        :label="item.label"
        min-width="75"
      />
      <!-- <template #bodyCell="{ column, record }">
        <slot
          v-if="column.slotName"
          :name="column.slotName"
          :record="record"
        />
      </template> -->
    </el-table>
    <el-row
      v-if="showFooter"
      type="flex"
      justify="end"
      class="footer"
    >
      <slot name="pagination">
        <el-pagination
          :current-page="page.currentPage"
          :page-size="page.pageSize"
          :total="listCount"
          show-size-changer
          @change="handleCurrentChange"
        />
      </slot>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
  listData: {
    type: Array,
    required: true,
  },
  listCount: {
    type: Number,
    default: 0,
  },
  propList: {
    type: Array,
    required: true,
  },
  showIndexColumn: {
    type: Boolean,
    default: false,
  },
  showSelectColumn: {
    type: Boolean,
    default: false,
  },
  page: {
    type: Object,
    default: () => ({ currentPage: 0, pageSize: 10 }),
  },
  childrenProps: {
    type: Object,
    default: () => ({}),
  },
  showFooter: {
    type: Boolean,
    default: true,
  },
})
const emit = defineEmits(['selectionChange', 'update:page'])

// 多选
const selectedRowKeys = ref([])
const handleSelectionChange = (value, record) => {
  emit('update:selectArray', value)
  emit('update:selectArrayAll', record)
  selectedRowKeys.value = value
  console.log(value, record)
}

// 页码
const handleCurrentChange = (currentPage, pageSize) => {
  // console.log('change', currentPage)
  emit('update:page', { ...props.page, currentPage, pageSize })
}

// const handleSizeChange = (pageSize) => {
//   emit('update:page', { ...props.page, pageSize })
// }
</script>

<style lang="scss" scoped>
.footer {
  padding: 10px 0;
}
</style>
